<template>
	<view>
		<u-swiper :list="swiperList" height="350" circular></u-swiper>
		<view class="mainpadding2">
			<view class="mainpadding_top ffffff radius">
				<view class="titletext bold hei_text">商品名稱商品名稱商品名稱商品名稱商品名稱</view>
				<view class="flexbetween margin_top">
					<view class="flexleft ">
						<view class="hei_text main_size bold">單價：</view>
						<view class="color_red main_size bold">${{545}}</view>
					</view>
					<view class="addbtn">+1</view>
				</view>
			</view>
			<view class="mainpadding_top ffffff radius">
				<view class="titletext bold hei_text flexcenter">商品詳情</view>
				<view class="margin_top" v-for="(item,index) in swiperList" :key="index" @click="lbtpriview(index,swiperList)">
					<image :src="item" style="width: 100%;" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="footerBox" >
			<view class="footerPirce flexbetween">
				<view class="flexbetween" style="width: 100%;">
					<view class="flexleft paddingtb padding_left3">
						<view class="cart margin_right3" @click="jumpurl('/pages_mine/zizhucqrdd')">
							<view class="num" v-text="12"></view>
						</view>
						<view class="line_r margin_right2"></view>
						<view>
							<text class="color_ling text_d">合計：</text>
							<text class="totalPrice">$</text>
							<text class="totalPrice" style="font-size: 36rpx;" v-text="152"></text>
						</view>
					</view>
				</view>
				<view class="settlement" @click="jumpurl('/pages_mine/zizhucqrdd')">查看</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:["https://useradmin.opos.tw/uploads/20240720/38d1a44585732472bbcda6c01d5113f2.jpg","https://useradmin.opos.tw/uploads/20240720/38d1a44585732472bbcda6c01d5113f2.jpg"]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.addbtn{
		background-color: #dee5eb;
		border-radius: 10rpx;
		padding: 10rpx 50rpx;
	}
	.footerBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 40rpx;
	
		.footerPirce {
			width: 708rpx;
			height: 101rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 53rpx 53rpx 53rpx 53rpx;
		}
	
		.cart {
			width: 40.5rpx;
			height: 42.58rpx;
			background-image: url("@/static/images/index/cart_num.png");
			background-size: 100% 100%;
			position: relative;
		}
	
		.num {
			width: 35rpx;
			height: 35rpx;
			line-height: 35rpx;
			text-align: center;
			background: #FF5C00;
			border-radius: 50%;
			position: absolute;
			right: -20rpx;
			top: -20rpx;
			font-size: 17rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	
		.line_r {
			width: 0;
			height: 42rpx;
			border-right: 2rpx dashed rgba(0, 0, 0, 1);
		}
	
		.totalPrice {
			font-size: 26rpx;
			font-family: DIN Next LT Pro-Medium;
			font-weight: 500;
			color: rgba(253, 70, 62, 1);
		}
	
		.settlement {
			width: 178rpx;
			min-width: 178rpx;
			max-width: 178rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #FFB800;
			border-radius: 0rpx 53rpx 53rpx 0rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}
		.settlementleft{
			width: 150rpx;
			height: 101rpx;
			line-height: 101rpx;
			text-align: center;
			background: #ff8505;
			border-radius: 53rpx 0 0rpx 53rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
		}
	}
</style>
